<template>
	<view class="patient-status-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="user-info">
				<image class="avatar" src="/static/avatar-default.png"></image>
				<text class="welcome">患者状态监测</text>
			</view>
			<view class="search-box">
				<input type="text" placeholder="搜索记录" />
			</view>
		</view>

		<!-- 主要内容区 -->
		<scroll-view scroll-y class="main-content">
			<!-- 患者基本信息 -->
			<view class="module-section">
				<view class="patient-info">
					<image class="patient-avatar" src="/static/avatar-default.png"></image>
					<view class="patient-details">
						<text class="patient-name">张三</text>
						<text class="patient-desc">65岁 | 晚期肺癌 | 住院3个月</text>
					</view>
					<view class="status-tag stable">状态稳定</view>
				</view>
			</view>

			<!-- 健康指标模块 -->
			<view class="module-section">
				<view class="module-header">
					<text class="module-title">健康指标</text>
					<text class="module-more">更多 ></text>
				</view>
				<view class="health-metrics">
					<view class="metric-card">
						<view class="metric-icon temperature">🌡️</view>
						<view class="metric-info">
							<text class="metric-name">体温</text>
							<text class="metric-value">36.5°C</text>
						</view>
						<text class="metric-time">今天 08:30</text>
					</view>
					<view class="metric-card">
						<view class="metric-icon pulse">❤️</view>
						<view class="metric-info">
							<text class="metric-name">脉搏</text>
							<text class="metric-value">78次/分</text>
						</view>
						<text class="metric-time">今天 08:30</text>
					</view>
					<view class="metric-card">
						<view class="metric-icon blood-pressure">💪</view>
						<view class="metric-info">
							<text class="metric-name">血压</text>
							<text class="metric-value">120/80mmHg</text>
						</view>
						<text class="metric-time">今天 08:30</text>
					</view>
				</view>
			</view>

			<!-- 日常记录模块 -->
			<view class="module-section">
				<view class="module-header">
					<text class="module-title">日常记录</text>
					<text class="module-more">更多 ></text>
				</view>
				<view class="daily-records">
					<view class="record-item">
						<view class="record-time">
							<text class="record-date">今天</text>
							<text class="record-hour">09:30</text>
						</view>
						<view class="record-content">
							<text class="record-title">用药记录</text>
							<text class="record-desc">按时服用止痛药，患者反应良好</text>
						</view>
						<view class="record-icon medication">💊</view>
					</view>
					<view class="record-item">
						<view class="record-time">
							<text class="record-date">今天</text>
							<text class="record-hour">12:00</text>
						</view>
						<view class="record-content">
							<text class="record-title">饮食记录</text>
							<text class="record-desc">进食半碗米粥，少量青菜</text>
						</view>
						<view class="record-icon diet">🍲</view>
					</view>
					<view class="record-item">
						<view class="record-time">
							<text class="record-date">昨天</text>
							<text class="record-hour">15:30</text>
						</view>
						<view class="record-content">
							<text class="record-title">情绪记录</text>
							<text class="record-desc">情绪稳定，与家人进行了愉快交流</text>
						</view>
						<view class="record-icon mood">😊</view>
					</view>
				</view>
			</view>

			<!-- 医疗团队模块 -->
			<view class="module-section">
				<view class="module-header">
					<text class="module-title">医疗团队</text>
					<text class="module-more">更多 ></text>
				</view>
				<view class="medical-team">
					<view class="team-member" @click="contactMedical('doctor')">
						<image class="member-avatar" src="/static/doctor-avatar.png"></image>
						<view class="member-info">
							<text class="member-name">李医生</text>
							<text class="member-role">主治医师</text>
						</view>
						<view class="contact-btn">联系</view>
					</view>
					<view class="team-member" @click="contactMedical('nurse')">
						<image class="member-avatar" src="/static/nurse-avatar.png"></image>
						<view class="member-info">
							<text class="member-name">王护士</text>
							<text class="member-role">责任护士</text>
						</view>
						<view class="contact-btn">联系</view>
					</view>
					<view class="team-member" @click="contactMedical('caregiver')">
						<image class="member-avatar" src="/static/caregiver-avatar.png"></image>
						<view class="member-info">
							<text class="member-name">张照护</text>
							<text class="member-role">专业照护者</text>
						</view>
						<view class="contact-btn">联系</view>
					</view>
				</view>
			</view>

			<!-- 快速操作模块 -->
			<view class="quick-actions">
				<view class="action-button" @click="addRecord">
					<view class="action-icon">📝</view>
					<text class="action-text">添加记录</text>
				</view>
				<view class="action-button" @click="emergencyContact">
					<view class="action-icon emergency">🆘</view>
					<text class="action-text">紧急联系</text>
				</view>
				<view class="action-button" @click="shareStatus">
					<view class="action-icon">🔄</view>
					<text class="action-text">分享状态</text>
				</view>
			</view>
		</scroll-view>

		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-item" @click="navigateTo('/pages/family/index')">
				<view class="tab-icon">🏠</view>
				<text class="tab-text">首页</text>
			</view>
			<view class="tab-item active">
				<view class="tab-icon">📊</view>
				<text class="tab-text">患者状态</text>
			</view>
			<view class="tab-item" @click="navigateTo('/pages/family/aiChat')">
				<view class="tab-icon">💬</view>
				<text class="tab-text">AI对话</text>
			</view>
			<view class="tab-item" @click="navigateTo('/pages/family/profile')">
				<view class="tab-icon">👤</view>
				<text class="tab-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	},
	methods: {
		navigateTo(url) {
			// 判断是否是底部导航栏的页面
			if (url.includes('/pages/family/index') ||
				url.includes('/pages/family/patientStatus') ||
				url.includes('/pages/family/aiChat') ||
				url.includes('/pages/family/profile')) {
				uni.switchTab({
					url: url
				});
			} else {
				uni.navigateTo({
					url: url
				});
			}
		},
		addRecord() {
			uni.navigateTo({
				url: '/pages/family/patientStatus/addRecord'
			});
		},
		emergencyContact() {
			uni.navigateTo({
				url: '/pages/family/patientStatus/emergency'
			});
		},
		shareStatus() {
			uni.showToast({
				title: '分享功能开发中',
				icon: 'none'
			});
		},
		contactMedical(type) {
			uni.navigateTo({
				url: `/pages/family/patientStatus/contact?type=${type}`
			});
		}
	}
}
</script>

<style>
.patient-status-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
}

/* 导航栏样式 */
.nav-bar {
	padding: 20rpx 30rpx;
	background-color: #52c41a;
	color: #fff;
}

.user-info {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	margin-right: 20rpx;
	background-color: #fff;
}

.welcome {
	font-size: 32rpx;
}

.search-box {
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 30rpx;
	padding: 10rpx 20rpx;
}

.search-box input {
	height: 60rpx;
	color: #fff;
	font-size: 28rpx;
}

/* 主内容区样式 */
.main-content {
	flex: 1;
	padding: 30rpx;
	overflow-y: auto;
}

.module-section {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.module-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.module-title {
	font-size: 34rpx;
	font-weight: bold;
	color: #333;
}

.module-more {
	font-size: 26rpx;
	color: #999;
}

/* 患者信息样式 */
.patient-info {
	display: flex;
	align-items: center;
}

.patient-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	margin-right: 30rpx;
}

.patient-details {
	flex: 1;
}

.patient-name {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.patient-desc {
	font-size: 28rpx;
	color: #666;
}

.status-tag {
	padding: 10rpx 20rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	color: #fff;
}

.stable {
	background-color: #52c41a;
}

.warning {
	background-color: #faad14;
}

.critical {
	background-color: #f5222d;
}

/* 健康指标样式 */
.health-metrics {
	display: flex;
	justify-content: space-between;
}

.metric-card {
	width: 30%;
	background-color: #f9f9f9;
	border-radius: 15rpx;
	padding: 20rpx;
}

.metric-icon {
	font-size: 40rpx;
	margin-bottom: 10rpx;
}

.metric-info {
	margin-bottom: 10rpx;
}

.metric-name {
	font-size: 26rpx;
	color: #666;
	display: block;
}

.metric-value {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-top: 5rpx;
}

.metric-time {
	font-size: 22rpx;
	color: #999;
}

/* 日常记录样式 */
.daily-records {
	display: flex;
	flex-direction: column;
}

.record-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.record-item:last-child {
	border-bottom: none;
}

.record-time {
	width: 120rpx;
}

.record-date {
	font-size: 24rpx;
	color: #999;
	display: block;
}

.record-hour {
	font-size: 28rpx;
	color: #333;
	display: block;
	margin-top: 5rpx;
}

.record-content {
	flex: 1;
	margin: 0 20rpx;
}

.record-title {
	font-size: 30rpx;
	color: #333;
	display: block;
	margin-bottom: 5rpx;
}

.record-desc {
	font-size: 26rpx;
	color: #666;
	display: block;
}

.record-icon {
	font-size: 40rpx;
}

/* 医疗团队样式 */
.medical-team {
	display: flex;
	flex-direction: column;
}

.team-member {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.team-member:last-child {
	border-bottom: none;
}

.member-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	margin-right: 20rpx;
}

.member-info {
	flex: 1;
}

.member-name {
	font-size: 30rpx;
	color: #333;
	display: block;
}

.member-role {
	font-size: 26rpx;
	color: #666;
	display: block;
	margin-top: 5rpx;
}

.contact-btn {
	padding: 10rpx 30rpx;
	background-color: #52c41a;
	color: #fff;
	border-radius: 30rpx;
	font-size: 26rpx;
}

/* 快速操作样式 */
.quick-actions {
	display: flex;
	justify-content: space-around;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.action-button {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.action-icon {
	font-size: 50rpx;
	margin-bottom: 10rpx;
}

.action-icon.emergency {
	color: #f5222d;
}

.action-text {
	font-size: 26rpx;
	color: #333;
}

/* 底部导航栏样式 */
.tab-bar {
	display: flex;
	height: 100rpx;
	background-color: #fff;
	border-top: 1rpx solid #eee;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.tab-icon {
	font-size: 40rpx;
	margin-bottom: 5rpx;
}

.tab-text {
	font-size: 24rpx;
	color: #999;
}

.tab-item.active .tab-text {
	color: #52c41a;
}
</style>